let that
// 声明一个类
class Tabs {
  constructor(id) {
    // 将构造函数赋值给that
    that = this
    // 获取tab元素
    this.main = document.querySelector(id)
    // 获取添加按钮
    this.tabAdd = this.main.querySelector('.firstNav .tabadd')
    // 获取ul
    this.ul = this.main.querySelector('.firstNav ul')
    // 获取sections的父元素
    this.sectionsFather = this.main.querySelector('.tabscon')
    // 调用初始化绑定事件
    this.init()
  }
  // 初始化绑定事件
  init() {
    // 调用动态获取参数
    this.updata()
    // 给添加按钮绑定点击事件
    this.tabAdd.addEventListener('click', this.addTabs)
    // 为所有li添加点击事件
    this.lis.forEach((item, index) => {
      // 获得对应的索引号
      item.index = index
      // 为所有li添加点击事件
      item.addEventListener('click', this.toggleTabs)
    })
    // 为删除按钮添加删除事件
    this.icons.forEach(item => {
      item.addEventListener('click', this.delTabs)
    })
    // 为所有span添加双击事件
    this.spans.forEach(item => {
      item.addEventListener('dblclick', this.editTabs)
    })
    // 为所有的section添加双击事件
    this.sections.forEach(item => {
      item.addEventListener('dblclick', this.editTabs)
    })
  }
  // 动态获取li和sections
  updata() {
    // 动态获取所有li
    this.lis = this.main.querySelectorAll('.firstNav li')
    // 动态获取section
    this.sections = this.main.querySelectorAll('.tabscon section')
    // 动态获取iconfont
    this.icons = this.main.querySelectorAll('.firstNav li .iconfont')
    // 动态获取span
    this.spans = this.main.querySelectorAll('.firstNav li span:first-child')
  }
  // 清空所有类名
  clearClassName() {
    // 将所有li的类名清空
    this.lis.forEach(item => {
      item.className = ''
    })
    // 将所有sections的类名清空
    this.sections.forEach(item => {
      item.className = ''
    })
  }
  // 切换点击事件
  toggleTabs() {
    // 调用清空函数
    that.clearClassName()
    // 给自己添加类名
    this.className = 'liactive'
    // 给对应的section添加类名
    that.sections[this.index].className = 'conactive'
  }
  // 添加点击事件
  addTabs() {
    // 清除其余类名
    that.clearClassName()
    // 创建新的li
    const li = `<li class="liactive">
                 <span>新测试</span>
                 <span class="iconfont icon-guanbi"></span>
               </li>`
    // 创建新的section
    // const section = `<section class="conactive">测试${ Math.random() }</section>`
    const section = `<section class="conactive">测试${ that.ul.children.length + 1 }</section>`
    // 往ul里面添加li
    that.ul.insertAdjacentHTML('beforeend', li)
    // 往sectionsFather里面添加section
    that.sectionsFather.insertAdjacentHTML('beforeend', section)
    // 调用初始化事件
    that.init()
  }
  // 添加删除事件
  delTabs(e) {
    // 阻止冒泡行为
    e.stopPropagation()
    // 当前索引号
    let index = this.parentNode.index
    // 删除对应li
    this.parentNode.remove()
    console.log(that.sections[index]);
    // 删除对应section
    that.sections[index].remove()
    // 再次调用init函数
    that.init()
    // 判断当前点击的是不是带类名的元素
    if (that.main.querySelector('.liactive')) return
    // 判断当前选中的是否是第一个元素，如果是就为第二个元素添加类名，不是就为前一个元素添加类名
    // 判断当前是否还有元素，有就继续操作，没有就什么都不做
    // if (index) {
    //   if (that.lis[index - 1]) that.lis[index - 1].click()
    // } else {
    //   if (that.lis[index]) that.lis[index].click()
    // }
    // index?that.lis[index-1]?that.lis[index-1].click():'':that.lis[index]?that.lis[index].click():''
    // index?that.lis[index-1]&&that.lis[index-1].click():that.lis[index]&&that.lis[index].click()
    index ? that.lis[index - 1]?.click() : that.lis[index]?.click()
  }
  // 添加编辑事件
  editTabs() {
    // 阻止双击默认选中事件
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
    // 声明一个str变量接收当前选中标签的内容
    const str = this.innerHTML
    // 为选中标签添加input输入框
    this.innerHTML = `<input type="text">`
    // 选中input输入框
    const input = this.children[0]
    // 将当前元素中的内容赋值给input输入框
    input.value = str
    // input输入框select方法，自动获取焦点并且输入框中的内容选中
    input.select()
    // 添加失去焦点事件
    input.onblur = function () {
      // 失去焦点时让input输入框中的内容赋值给父级标签
      this.parentNode.innerHTML = this.value
    }
    // 添加键盘弹起事件
    input.onkeyup = function (e) {
      // 判断是不是回车键
      if (e.keyCode === 13) {
        // 执行失去焦点事件
        this.blur()
      }
    }
  }
}
// 实例化对象
new Tabs('#tab')